<template>
  <div class="material-icon" :class="`text-${variant} ${size}`">{{ image }}</div>
</template>

<script lang="ts">
import { Component, Vue, Prop, toNative } from 'vue-facing-decorator';

@Component
class Icon extends Vue {

  @Prop({ type: String, default: 'inherit', validator: (value: string) => ['inherit', 'tiny', 'small', 'medium', 'large', 'huge'].includes(value) })
  public size!: string;

  @Prop({ type: String, default: 'none', validator: (value: string) => ['none', 'primary', 'regular', 'secondary', 'undertone', 'success', 'info', 'warning', 'caution', 'danger', 'accent'].includes(value) })
  public variant!: string;

  @Prop({ type: String, required: true })
  public image!: string;

}

export default toNative(Icon);
</script>

<style scoped lang="stylus">

/** 图标 */

@font-face
  font-family 'MaterialIcon';
  src url(@/assets/fonts/MaterialIcon.woff2) format('woff2');
  font-weight 100 700;
  font-style normal;

.material-icon
  font-family: MaterialIcon;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;

.text-huge .material-icon.inherit,
.material-icon.huge
  font-size: 48px

.text-large .material-icon.inherit,
.material-icon.large
  font-size: 30px

.text-medium .material-icon.inherit,
.material-icon.medium
  font-size: 24px

.text-small .material-icon.inherit,
.material-icon.small
  font-size: 21px

.text-tiny .material-icon.inherit,
.material-icon.tiny
  font-size: 15px

</style>
